/** @type {import('webpack').Configuration} */
const path = require("path");
const glob = require("glob");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const { VueLoaderPlugin } = require('vue-loader')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const setMap = () => {
      const entry = {},
            htmlwebpackplugin = [];
      const entryFiles = glob.sync("./src/entry/*/index.js");
      entryFiles.forEach((entryFile) => {
            const match = entryFile.match(/src\/entry\/(.*)\/index\.js/);
            const pageName = match[1];
            entry[pageName] = entryFile;

            htmlwebpackplugin.push(new HtmlWebpackPlugin({
                  template: path.resolve(__dirname, `./public/html/${pageName}.html`),
                  inject: true,
                  chunks: [pageName],
                  filename: `${pageName}.html`
            }))
      })

      return { entry, htmlwebpackplugin };
}

const { entry, htmlwebpackplugin } = setMap();

module.exports = function (env) {
      return {
            mode: env.development ? "development" : "production",
            entry: entry,
            output: {
                  path: path.resolve(__dirname, "./dist"),
                  filename: "js/[name][hash:8].js"
            },
            module: {
                  rules: [{
                        test: /\.(less|css)$/,
                        use: [env.development ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
                              "css-loader", "postcss-loader", {
                              loader: "px2rem-loader",
                              options: {
                                    remUnit: 20, // 1rem代表20px
                                    remPrecesion: 8, // 保留8位小数
                              }
                        }, "less-loader"]
                  },
                  {
                        test: /\.vue$/,
                        loader: 'vue-loader'
                  },
                  {
                        test: /\.js$/,
                        exclude: /(node_modules|bower_components)/,
                        use: ["babel-loader"]
                  },
                  {
                        test: /\.(jpg|png|gif|svg|jpeg|webp)$/,
                        type: "asset",
                        generator: {
                              filename: "static/[hash][ext][query]",
                        },
                        parser: {
                              dataUrlCondition: {
                                    maxSize: 3 * 1024,
                              },
                        },
                        use: ["image-webpack-loader"]
                  }],
            },
            resolve: {
                  alias: {
                        "@": path.resolve(__dirname, "./src/")
                  }
            },
            plugins: [
                  new MiniCssExtractPlugin({
                        filename: "css/[name][hash:8].css",
                  }),
                  new VueLoaderPlugin(),
                  new CleanWebpackPlugin(),
                  ...htmlwebpackplugin]
      }
}